<!--
 * @Author: Bo
 * @Date: 2022-03-21 09:34:27
-->
<template>
  <div id="artical" v-loading="data.loading">
    <div class="home-artical-header">
      <ul class="artical-category">
        <li
          class="artical-category--item"
          :class="{ active: store.currentTypeId === 0 }"
          @click="changeType(0)"
        >
          全部
        </li>
        <li
          class="artical-category--item"
          v-for="(item, index) in store.typeList"
          :key="item + index"
          :class="{ active: store.currentTypeId === item['id'] }"
          @click="changeType(item['id'])"
        >
          {{ item['type'] }}
        </li>
      </ul>
      <div class="artical-mini-pagenation" v-if="data.pagination">
        <el-pagination
          small
          layout="prev,pager, next"
          :total="data.pagination.total"
          :page-size="data.pagination.pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <div v-if="!data.loading">
      <div v-if="data.blogList && data.blogList.length">
        <ul class="artical-list">
          <li class="artical-content" v-for="item in data.blogList" :key="item">
            <ArticalItem :item="item" type="list"></ArticalItem>
          </li>
        </ul>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="data.pagination.total"
          :page-size="data.pagination.pageSize"
          class="pagination"
          @current-change="handleCurrentChange"
          small
        >
        </el-pagination>
      </div>

      <div v-else>
        <el-empty description="暂无博客..."></el-empty>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'
import ArticalItem from '/@/components/artical/artical-item.vue'
import { getBlog } from '/@/api/api'
import { useMainStore } from '/@/store'
import { CountRange } from '/@/interface/home'
import { storeToRefs } from 'pinia'

const store = useMainStore()
const storeData = storeToRefs(store)
const data: CountRange = reactive({
  loading: false, // 加载
  pagination: {
    total: 10,
    pageSize: 10,
    current: 1
  },
  blogList: []
})

// 获取博客
const getBlogData = async () => {
  data.loading = true
  const res: any = await getBlog({
    page: data.pagination.current,
    type_id: store.currentTypeId
  }).finally(() => {
    data.loading = false
  })

  if (res.code === 1) {
    data.blogList = res.data.data
    data.pagination = {
      total: res.data.total,
      pageSize: res.pageSize,
      current: res.data.current_page
    }
  }
}

// 修改类型触发
const changeType = (id: number) => store.setTypeId(id)

// 修改页码
const handleCurrentChange = (val: number) => {
  data.pagination.current = val
  getBlogData()
}

// 监听typeId重新获取博客数据
watch(storeData.currentTypeId, () => {
  getBlogData()
})

// 监听typeId重新获取博客数据
// store.$subscribe((mutation) => {
//   console.log(mutation)
//   if (mutation.events.key === 'currentTypeId') {
//     getBlogData()
//   }
// })

getBlogData()
</script>
<style lang="less" scoped>
#artical {
  .home-artical-header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    align-items: center;

    .artical-category {
      padding: 0 20px;
      font-size: 14px;
      line-height: 60px;

      .artical-category--item {
        display: inline-block;
        margin-right: 25px;
        cursor: pointer;
      }

      .artical-category--item.active {
        color: chocolate;
      }
    }
  }

  .artical-list {
    min-height: 500px;
  }

  .pagination {
    padding: 20px;
    float: right;
  }
}
</style>
